<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page import="com.siloam.module.User" %>
<%
	String groupId = request.getParameter("id");
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="../../jeasyui/themes/gray/easyui.css" />
<link rel="stylesheet" type="text/css" href="../../jeasyui/themes/icon.css" />
<link rel="stylesheet" type="text/css" href="../../css/manager.css" />

<script type="text/javascript" src="../../jeasyui/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="../../jeasyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="../../jeasyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="../../js/win.js"></script>
<title>人员分组</title>
<script type="text/javascript">

	function initDropGroup(){
		$.ajax({
		   type: "POST",
		   url: "group.do",
		   data : {method : 'listByType'},
		   dataType: "json",
		   success: function(groups){
			   var dropContent = "";
			   var users = null;
		   		for(var i = 0; i < groups.length; i++){
		   			dropContent += "<div style='width: 230px;height: 145px;float: left;padding:0 5px 5px 0;' >";
		   			dropContent += "<div class='easyui-panel' name='dropItem' data-options='fit:true'  title='"
		   							+ groups[i].name + "' id='" + groups[i].id+"'>";
		   			dropContent += "</div></div>";
		   		}
		   		$("#dropArea").append(dropContent);
		   		initDropItem();
		   }
		});
	}

	function initDragUser(){
		$.ajax({
		   type: "POST",
		   url: url,
		   data : {method : 'listByType'},
		   dataType: "json",
		   success: function(users){
			   var dragContent = "";
		   		for(var i = 0; i < users.length; i++){
		   			dragContent += "<div class='drag-item' id='"+users[i].id +"'>" + users[i].name +"</div>";
		   		}
		   		$("#dragArea").append(dragContent);
		   		initDragItem();
		   }
		});
	}
	
	function initDropItem(){
		$("div[name='dropItem']").panel();
		$("div[name='dropItem']").droppable({
	    	onDrop:function(e,source){
	    		var id = $(source).attr("id");
	    		if(canDrop(id, this)){
	    			$(this).append(source);
	    		}
	    	}
	    });  
	}
	$(function(){
		initDropGroup();
	});
	
</script>
<style type="text/css">
	.drag-item{
		border: 1px solid #CCCCCC;
		margin: 2px;
		text-align:center;
		background-color: #F8F8F8;
		width: 45px;
		height: 20px;
		line-height: 20px;
		float: left;
	}
	.group-leader{
		border: 1px solid #CCCCCC;
		margin: 2px;
		text-align:center;
		background-color: #F8F8F8;
		width: 45px;
		height: 20px;
		line-height: 20px;
		float: left;
		color: blue;
	}
</style>
</head>
<body class="easyui-layout">
	<div data-options="region:'center',border:false" style="padding: 5px" id="dropArea">
	</div>
	<div data-options="region:'west',border:false" style="width: 200px;padding: 5px">
		<div class="easyui-panel" data-options="fit:true" title="未分组人员" id="dragArea">
		</div>
	</div>
</body>
</html>